<template>
	<view class="tool-wrapper" @mouseleave="activeIndex = -1;" >
		<block v-for="(item, index) in tools" :key="index" v-if="index<2" >
			<a class="tool"  :href="item.linkUrl || 'javascript:void(0);'" :target="item.linkUrl ? '_blank' : '_self'" :style="{'cursor': item.linkUrl ? 'pointer' : 'default'}"
			 @mouseenter="activeIndex = index;">
				<img class="icon" :src="activeIndex == index ? item.iconActiveUrl : item.iconUrl" />
				<view class="name">{{item.name}}</view>
			</a>
		</block>

		<!-- 回到顶部按钮 -->
		<view :class="['tool btn-totop', {'onlyme': onlyGotopBtn}]" @mouseenter="activeIndex = 2;" @click="goTop" style="border-radius: 0 0 0 18px;width: 84px !important;">
			<img class="icon" :src="activeIndex == 2 ? tools[2].iconActiveUrl : tools[2].iconUrl" />
			<view class="name">{{tools[2].name}}</view>
		</view>
		
		<!-- 二维码弹窗 -->
		<!-- <view class="qrcode-popup" v-if="activeIndex == 0">
			<image class="qrcode" src="../../static/image/common/qrcode.png"></image>
			<view class="desc">手机扫一扫下载商城</view>
		</view> -->
	</view>
</template>

<script>
	import toolBarConfig from '@/common/config/home/tool-bar.config.js';

	export default {
		props: {
			scrollTop: {
				type: Number,
				default: 0
			},
			onlyGotopBtn: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				...toolBarConfig,
				activeIndex: -1
			}
		},
		methods: {
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				});
			}
		}
	}
</script>

<style lang="scss">
	.tool-wrapper {
		position: fixed;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
		display: none;
		border-radius: 18px 0 0 18px;
		box-shadow: -2px 0px 30px 2px rgba(97,105,119,0.2);
		@media screen and (min-width: 1406px) {
			display: block !important;
		}
		.tool:first-child{
			border-radius: 18px 0 0 0;
		}
		.tool {
			display: block;
			width: 82px;
			height: 90px;
			margin-top: -1px;
			border: 1px solid #f5f5f5;
			text-align: center;
			background-color: #FFFFFF;

			&:hover {
				.name {
					color: #e93323;
				}
			}

			&.btn-totop {
				cursor: pointer;
				
				
				&.onlyme {
					margin-top: 500px;
				}
			}

			.icon {
				width: 30px;
				height: 30px;
				margin-top: 18px;
			}

			.name {
				color: #757575;
			}
		}
		
		%arrow {
			content: '';
			position: absolute;
			top: 20px;
			border: 8px solid transparent;
		}

		.qrcode-popup {
			position: absolute;
			right: 100%;
			top: 0;
			margin-right: 15px;
			padding: 5px;
			background-color: #FFFFFF;
			border: 1px solid #f5f5f5;
			.qrcode {
				width: 100px;
				height: 100px;
				
			}

			.desc {
				margin: 0 auto;
				color: #757575;
				text-align: center;
				width: 82px;
			}

			&::before {
				@extend %arrow;
				right: -17px;
				border-left-color: #f5f5f5;
			}

			&::after {
				@extend %arrow;
				right: -16px;
				border-left-color: #FFFFFF;
			}
		}
	}
</style>
